<template>
  <div class="control-container page-height">
    <el-row :gutter="20" v-loading="loading">
      <el-col :sm="24" :lg="12" class="mb-4">
        <el-card>
          <template #header> 风扇设备控制 </template>
          <div class="data">
            <span>室内温度：{{ temperatureNum }} ℃</span>
            <span>室内湿度：{{ humidityNum }} %</span>
            <span>二氧化碳浓度：{{ carbonDioxideNum }}ppm</span>
          </div>
          <div class="equipment">
            <div>设备状态：<span :style="status == '在线' ? 'color: blue;' : 'color: red;'">{{ status }}</span></div>
            <div>风扇开关：
              <el-switch v-model="fanControl" active-color="#13ce66" inactive-color="#ff4949" active-text="开"
                inactive-text="关" @change="fanSwitch" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12" class="mb-4">
        <el-card>
          <template #header> 水泵设备控制 </template>
          <div class="data">
            <!-- <span>土壤温度：30 ℃</span> -->
            <span>土壤湿度：{{ soilMoistureNum }} %</span>
          </div>
          <div class="equipment">
            <div>设备状态：<span :style="status == '在线' ? 'color: blue;' : 'color: red;'">{{ status }}</span></div>
            <div>水泵开关：
              <el-switch v-model="waterControl" active-color="#13ce66" inactive-color="#ff4949" active-text="开"
                inactive-text="关" @change="waterSwitch" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12" class="mb-4">
        <el-card>
          <template #header> 灯设备控制 </template>
          <div class="data">
            <span>光照强度：{{ lightIntensityNum }} Lux</span>
          </div>
          <div class="equipment">
            <div>设备状态：<span :style="status == '在线' ? 'color: blue;' : 'color: red;'">{{ status }}</span></div>
            <div>灯开关：
              <el-switch v-model="ledControl" active-color="#13ce66" inactive-color="#ff4949" active-text="开"
                inactive-text="关" @change="ledSwitch" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12" class="mb-4">
        <el-card>
          <template #header> 蜂鸣器设备控制 </template>
          <div class="data">
            <span>{{ wariness }}</span>
          </div>
          <div class="equipment">
            <div>设备状态：<span :style="status == '在线' ? 'color: blue;' : 'color: red;'">{{ status }}</span></div>
            <div>蜂鸣器开关：
              <el-switch v-model="warnControl" active-color="#13ce66" inactive-color="#ff4949" active-text="开"
                inactive-text="关" @change="warnSwitch" />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { useMonitorStore } from '@/store/modules/monitor';
import { SensorData, StatusData } from '@/api/monitor/types';
import { controlEquip } from '@/api/monitor/index';
import { color } from 'echarts';
const monitorStore = useMonitorStore();
const sensorData = reactive<SensorData>({
  uid: '750a73015606412886f1763a1ad29ce5',
  topic: 'temp',
  num: '10'
});
const statusData = reactive<StatusData>({
  uid: '750a73015606412886f1763a1ad29ce5',
  topic: 'temp',
  type: 1
});
let loading = ref(true)
let waterControl = ref(false)
let fanControl = ref(false)
let ledControl = ref(false)
let warnControl = ref(false)
let temperatureNum = ref('')
let humidityNum = ref('')
let soilMoistureNum = ref('')
let lightIntensityNum = ref('')
let carbonDioxideNum = ref('')
let fanStatus = ref('normal')
let waterStatus = ref('normal')
let wariness = ref('传感器数据正常,暂无报警信息！')
let status = ref('离线')

function getMonitorData() {
  monitorStore.getSensorData(sensorData).then(res => {
    const list = res.list.data[0].msg
      .split('#')
      .filter((item: any) => item !== '');
    console.log(list);
    temperatureNum.value = list[0]
    humidityNum.value = list[1]
    soilMoistureNum.value = list[2]
    lightIntensityNum.value = list[3]
    carbonDioxideNum.value = list[4]
    fanStatus.value = list[5]
    waterStatus.value = list[6]
    setTimeout(() => {
      loading.value=false
    }, 500);
  });
}
function getStatus() {
  monitorStore.getStatusData(statusData).then(res => {
    console.log(res);
    if (res.list.data == true) {
      status.value = '在线'
    } else {
      status.value = '离线'
    }
  })
}
function fanSwitch(res: any) {
  if (status.value == '离线') {
    ElMessage.error('设备不在线，无法进行控制！')
    fanControl.value = false
    return
  }
  if (res) {
    controlRequest('fanSwitch', 'fanon', '风扇已开启！')
  } else {
    controlRequest('fanSwitch', 'fanoff', '风扇已关闭！')
  }
}
function waterSwitch(res: any) {
  if (status.value == '离线') {
    ElMessage.error('设备不在线，无法进行控制！')
    waterControl.value = false
    return
  }
  if (res) {
    controlRequest('waterSwitch', 'wateron', '水泵已开启！')
  } else {
    controlRequest('waterSwitch', 'wateroff', '水泵已关闭！')
  }
}
function ledSwitch(res: any) {
  if (status.value == '离线') {
    ElMessage.error('设备不在线，无法进行控制！')
    ledControl.value = false
    return
  }
  if (res) {
    controlRequest('ledSwitch', 'ledon', '灯已开启！')
  } else {
    controlRequest('ledSwitch', 'ledoff', '灯已关闭！')
  }
}
function warnSwitch(res: any) {
  if (status.value == '离线') {
    ElMessage.error('设备不在线，无法进行控制！')
    warnControl.value = false
    return
  }
  if (res) {
    controlRequest('buzzerSwitch', 'buzzeron', '蜂鸣器已开启！')
  } else {
    controlRequest('buzzerSwitch', 'buzzeroff', '蜂鸣器已关闭！')
  }
}
async function controlRequest(topic: string, msg: string, equipMsg: string) {
  await controlEquip({
    uid: '750a73015606412886f1763a1ad29ce5',
    topic: topic,
    msg: msg
  }).then((res: any) => {
    console.log(res)
    if (res.status == 200 && res.message == '请求成功') {
      ElMessage({
        message: `${equipMsg}`,
        type: 'success',
      })
    } else {
      ElMessage.error(`${equipMsg}控制失败`)
    }
  })
}
onMounted(() => {
  getMonitorData();
  getStatus();
});
</script>

<style lang="scss" scoped>
:deep(.el-card__header),
:deep(.el-card__body) {
  padding: 10px;
}

:deep(.el-card__header) {
  font-size: 20px;
  font-weight: bold;
}

.control-container {
  padding: 24px;
  position: relative;

  .el-card {
    margin-bottom: 10px;
  }
}

.data {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  font-weight: 600;
  padding: 10px;
  margin: 20px 0 30px 0;
  text-align: center;
  border: 2px solid #999;
  border-radius: 10px;
}

.equipment {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
}
</style>
